<template>
    <div style="margin-top: 12px">
        <flexbox class="margin-b-8" style="padding: 0 5px">
            <div>
                <span>以下</span>
                <span :class="paginationConfig.total > 0 ? 'warning-color' : ''">{{ paginationConfig.total }}</span>
                <span>需求由于未按照规范拆分子任务无法提取阶段时间，未参与北极星指标计算</span>
            </div>
            <div>
                <a-tooltip>
                    <template #title>
                        <span v-html="`子任务命名格式【开发】xxxxxx子任务【测试】xxxxx子任务`" />
                    </template>
                    <QuestionCircleOutlined class="margin-l-8" />
                </a-tooltip>
            </div>
        </flexbox>

        <a-table
            rowKey="id"
            size="small"
            :columns="tableColumns"
            :data-source="list"
            :loading="loading"
            :pagination="paginationConfig"
            @change="handleTableChange"
        >
            <template #index="{ index }">
                {{ index + 1 }}
            </template>
            <!-- 技术中台 -->
            <template #businessCreateTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #businessFirstReviewTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #businessAcceptTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #versionConfirmTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #versionRanddRealStartTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #versionRanddRealEndTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #versionTestRealStartTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #versionTestRealEndTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #versionOnlineRealTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <!-- jira -->
            <template #submitTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #acceptTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #confirmTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #randdStartTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #randdEndTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #testStartTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #testEndTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #onlineTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
        </a-table>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { useRoute } from 'vue-router';
import { defineComponent, computed, reactive, toRefs, watch } from 'vue';
import { State } from './types';

export default defineComponent({
    components: {
        QuestionCircleOutlined
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['change'],
    setup(props, { emit }) {
        const route = useRoute();
        const state = reactive<State>({
            list: [],
            paginationConfig: {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            },
            loading: false
        });

        const tableColumns = computed(() => {
            // 内部
            if (props.detail?.pmpProductDetailDTO.isOutsideSystem === '0') {
                return [
                    {
                        title: '序号',
                        width: 50,
                        dataIndex: 'index',
                        slots: { customRender: 'index' }
                    },
                    {
                        title: '关联业务需求',
                        width: 300,
                        dataIndex: 'businessName'
                    },
                    {
                        title: '产品需求名称',
                        width: 300,
                        dataIndex: 'productName'
                    },
                    {
                        title: '提出时间',
                        dataIndex: 'businessCreateTime',
                        slots: { customRender: 'businessCreateTime' }
                    },
                    {
                        title: '初审时间',
                        dataIndex: 'businessFirstReviewTime',
                        slots: { customRender: 'businessFirstReviewTime' }
                    },
                    {
                        title: '受理时间',
                        dataIndex: 'businessAcceptTime',
                        slots: { customRender: 'businessAcceptTime' }
                    },
                    {
                        title: '方案确定',
                        dataIndex: 'versionConfirmTime',
                        slots: { customRender: 'versionConfirmTime' }
                    },
                    {
                        title: '研发实际开始',
                        dataIndex: 'versionRanddRealStartTime',
                        slots: { customRender: 'versionRanddRealStartTime' }
                    },
                    {
                        title: '研发实际结束',
                        dataIndex: 'versionRanddRealEndTime',
                        slots: { customRender: 'versionRanddRealEndTime' }
                    },
                    {
                        title: '测试实际开始',
                        dataIndex: 'versionTestRealStartTime',
                        slots: { customRender: 'versionTestRealStartTime' }
                    },
                    {
                        title: '测试实际结束',
                        dataIndex: 'versionTestRealEndTime',
                        slots: { customRender: 'versionTestRealEndTime' }
                    },
                    {
                        title: '实际上线',
                        dataIndex: 'versionOnlineRealTime',
                        slots: { customRender: 'versionOnlineRealTime' }
                    }
                ];
            }
            // 外部
            else {
                return [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        slots: { customRender: 'index' }
                    },
                    {
                        title: 'JIRA ISSUE',
                        dataIndex: 'summary',
                        width: 300
                    },
                    {
                        title: '提出时间',
                        dataIndex: 'submitTime',
                        slots: { customRender: 'submitTime' }
                    },
                    {
                        title: '受理时间',
                        dataIndex: 'acceptTime',
                        slots: { customRender: 'acceptTime' }
                    },
                    {
                        title: '方案确定',
                        dataIndex: 'confirmTime',
                        slots: { customRender: 'confirmTime' }
                    },
                    {
                        title: '研发实际开始',
                        dataIndex: 'randdStartTime',
                        slots: { customRender: 'randdStartTime' }
                    },
                    {
                        title: '研发实际结束',
                        dataIndex: 'randdEndTime',
                        slots: { customRender: 'randdEndTime' }
                    },
                    {
                        title: '测试实际开始',
                        dataIndex: 'testStartTime',
                        slots: { customRender: 'testStartTime' }
                    },
                    {
                        title: '测试实际结束',
                        dataIndex: 'testEndTime',
                        slots: { customRender: 'testEndTime' }
                    },
                    {
                        title: '需求上线时间',
                        dataIndex: 'onlineTime',
                        slots: { customRender: 'onlineTime' }
                    }
                ];
            }
        });
        const getList = async () => {
            state.loading = true;
            // 区分内部外部
            const requestApi =
                props.detail.pmpProductDetailDTO.isOutsideSystem === '0'
                    ? api.portalControlModel.selectProductPage
                    : api.portalControlModel.selectJiraPage;
            const { ...query } = route.query;
            const { success, moule, totalCount } = await requestApi({
                ...query,
                pageNum: state.paginationConfig.current,
                pageSize: state.paginationConfig.pageSize,
                isStatistics: 3
            });
            if (success) {
                state.list = [...moule];
                console.log('list', state.list);
                state.paginationConfig.total = totalCount;
                console.log('totalCount', state.paginationConfig.total);
                emit('change', totalCount);
            }
            state.loading = false;
        };
        const handleTableChange = (val) => {
            state.paginationConfig = val;
            getList();
        };
        watch(
            () => props.detail,
            () => {
                getList();
            },
            { deep: true, immediate: true }
        );
        return {
            tableColumns,
            ...toRefs(state),
            handleTableChange
        };
    }
});
</script>

<style scoped lang="less">
.tongjitable-wrap {
    .header {
        padding: 16px;
    }
    .cont {
        padding: 12px;
    }
}
</style>
